import React, { PureComponent } from 'react'
import './index.css'
/**
 * 改组件监听属性的变化
 */
export default class MouseListener extends PureComponent {
  divRef = React.createRef()
  state = {
    x:50,
    y:50
  }
  hanldeMouseMove = e=>{
    console.log(e)
    console.log(e.pageX,e.pageY)
    console.log(this.divRef)
    const {left ,top} = this.divRef.current.getBoundingClientRect()
    const x = e.pageX - left
    const y = e.pageY - top
    console.log(left,top)
    this.setState({
      x,y
    })

  } 
  render() {
    return (
      <div ref={this.divRef} className='point' onMouseMove={
        this.hanldeMouseMove
      }>
       {this.props.children(this.state)}

     
      </div>
    )
  }
}
